<template>
  <div class="app-container">
    <el-tabs type="border-card" :value="activeTab" @tab-click="changeTab">
      <el-tab-pane name="one" label="访问量统计">
        <span slot="label"><i class="el-icon-date"></i>访问量统计</span>
        <visit-amount v-show="activeTab === 'one'"/>
      </el-tab-pane>
      <el-tab-pane label="访问地域统计" name="two">
        <visit-region v-show="activeTab === 'two'"/>
      </el-tab-pane>
      <!-- <el-tab-pane label="来路域名统计" name="three">
        <visit-refer v-show="activeTab === 'three'" />
      </el-tab-pane> -->
      <!-- <el-tab-pane label="访问终端统计" name="four">
        <visit-terminal v-show="activeTab === 'four'" />
      </el-tab-pane> -->
    </el-tabs>

  </div>
</template>

<script>
  import VisitAmount from "@/views/operational/flow/amount";//访问量统计
  import VisitRegion from "@/views/operational/flow/region";//访问地域统计
  import VisitRefer from "@/views/operational/flow/refer";//来路域名统计
  import VisitTerminal from "@/views/operational/flow/terminal";//访问终端统计
  import {tabs} from '@/build'

  export default {
    name: "flow",
    components: {
      VisitAmount,
      VisitRegion,
      VisitRefer,
      VisitTerminal
    },
    data() {
      return {
        activeTab: 'one'
      }
    },
    mixins: [tabs],
    mounted() {
      //tab页记录访问日志
      this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, '访问量统计', true)});
    },
    methods: {
      changeTab(tab) {
        //tab页记录访问日志
        this.$store.dispatch(types.SAVE_OPERATION_LOG, {content: _.getContent(this.$route, tab.label, true)});
        this.activeTab = tab.name
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>
